chrome.runtime.onInstalled.addListener(() => { 
  chrome.action.setBadgeText({
    text: 'OFF'
  })
})

const MDN = "https://developer.mozilla.org/zh-CN/docs/Web";
const extensions = "https://developer.chrome.com/docs/extensions";

chrome.action.onClicked.addListener(async (tab) => { 
  if(tab.url.startsWith(MDN) || tab.url.startsWith(extensions)) {
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    await chrome.action.setBadgeText({
      text: nextState,
      tabId: tab.id
    })

    if (nextState === 'ON') { 
      await chrome.scripting.insertCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id }
      })
    }
    else if (nextState === 'OFF') { 
      await chrome.scripting.removeCSS({
        files: ['focus-mode.css'],
        target: { tabId: tab.id }
      })
    }
  }
})